/*
Author: John Maydew
Created: 12/06/2010 (DD/MM/YYYY)
*/

body { font-family: "Calibri", Arial, Helvetica, sans-serif; margin: 0; padding: 0; }

/* Main display elements */
.header { position: fixed; top: 0; width: 100%; height: 175px; clear: both; display: block; background-image: url('header-bg.png'); background-repeat: repeat-x; }
.navigation { text-align: center; position: fixed; top: 175px; width: 100%; height: 35px; clear: both; display: block; background-image: url('navigation-bg.png'); background-repeat: repeat-x; }
.content-contain { min-width: 800px; width: 80%; max-width: 900px; min-height: 500px; height: auto; margin: 210px auto 0 auto; clear: both; }
.padding-right { min-width: 100px; width: 10%; min-height: inherit; height: auto; float: right; clear: right; }
.padding-left { min-width: 100px; width: 10%; min-height: inherit; height: auto; float: left; clear: left; }
.content { min-width: 580px; width: 80%; min-height: inherit; height: auto; background-color: #DDD; margin: 0 auto 0 auto; padding: 30px 10px 10px 10px; }
.footer { min-width: 800px; width: 80%; max-width: 900px; height: 30px; font-style: italic; color: #777; text-align: right; font-size: 13px; margin: 10px; } 

/* Header Elements */
.header > h1 { color: #FFF; font-size: 45px; display: inline; height: 175px; margin-right: 30px; float: right; }

/* Navigation Elements */
.navigation a { float: right; color: #fff; text-decoration: none; margin: none; padding: 4px 10px 0 10px; height: 31px; display: inline-block; font-size: 20px; font-weight: bold; }
.navigation a:hover { background-image: url('navigation-hover-bg.png'); }
/*
The navigation popup is useful for login data, should your site use it. By default the width of the popup box is the same as the navigation anchor that it's attached to.
To set the popup to appear underneath the navigation bar set its TOP value to 210px
*/
.navigation a.popup { float: left; padding: 4px 10px 0 10px; width: 125px; height: 31px; display: inline-block; text-decoration: none; color: #fff; font-size: 20px; font-weight: bold; }
.navigation a.popup:hover { background-image: url('navigation-hover-bg.png'); }
.navigation a.popup > div.popup { height: 175px; position: fixed; top: 0; left: 0; background-color: #fff; width: inherit; padding: inherit; display: block; visibility: hidden; }
.navigation a.popup:hover > div.popup { visibility: visible; }


/* Content Elements */
.content > h1 { border-left: 10px solid #C03; padding-left: 5px; border-bottom: 3px dotted #C03; }
.content > h2 { border-left: 10px solid #390; padding-left: 5px; }
.content > h3 { border-left: 3px dotted #06F; padding-left: 5px; }
.content > p { text-indent: none; text-indent: 1.5em; }
.content > img { clear: none; display: inline; border: 3px outset #555; }
.content > img.left { margin: 10px 10px 10px 0; float: left; }
.content > img.right { margin: 10px 0 10px 10px; float: right; }
.content a { color: #C03; text-decoration: none; }
.content a:hover { text-decoration: underline; }
.content p.quote { font-size: 13px; text-align: center; color: #333; font-style: italic; }
.content p.emphasis { display: inline; border-bottom: 2px solid #900; }

.content > .box { background-color: #454545; color: #FFF; padding: 0 5px 0 5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
.content > .box.left { float: left; margin: 10px 10px 10px 0; width: 300px; }
.content > .box.right { float: right; margin: 10px 0 10px 10px; width: 300px; }
.content > .box > h1 { margin: 0; font-size: 18px; margin-top: 0.67em; }
.content > .box > p { text-indent: 0.5em; font-size: 14px; }
.content > hr { width: 80%; border: 2px groove #CDCDCD; }

/* Form Elements */
.text { height: 20px; border: 1px inset #CCC; border-right: none; border-top: none; padding: 4px; margin: 2px 0 1px 0; }
.button { height: 1.6em; widht: 50px; background-color: #fff; border: 1px inset #CCC; margin: 4px; }
.button:hover { border-color: #09F; cursor: pointer; }
label { border: 1px solid #FF9; border-left: none; padding: 4px; margin: 2px 2px 1px 0; position: relative; top: 1px; background-color: #FF9; color: #000; }

/* Footer Elements */
.footer > a { color: #F60; text-decoration: none; }
.footer > a:hover { text-decoration: underline; }